<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            margin: 20px;
            -ms-box-shadow:1px 1px 1px  1px rgba(0,0,0,0.5);
            -moz-box-shadow:1px 1px 1px  1px rgba(0,0,0,0.5);
            -o-box-shadow:1px 1px 1px  1px rgba(0,0,0,0.5);
            -webkit-box-shadow:1px 1px 1px  1px rgba(0,0,0,0.5);
            box-shadow:1px 1px 1px  1px rgba(0,0,0,0.5);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
<script>
    // 第一次浏览器大战
    // Internet Explorer (主流)
    // Netscape


    // 第二次浏览器大战                 (五大浏览器内核)                            css3兼容
    // IE(遨游 360(双内核))                  Trident                                 -ms-
    // Mozilla Firefox                      Gecko (开源)                            -moz-
    // Opera(欧朋)                           Persto                                 -o-
    // Chrome(谷歌)  Safari(苹果)            webkit(稳定/手机app内核 webkit)         -webkit-
    // Opera(新版)                           Blink


    // 兼容IE(5 6 7 )

    // 浏览器存在的bug? 
    // margin-top穿透
    // 图片三像素
    // 多个图片之间有间隙
    // 上下margin重叠


    // 第三次(H5(移动端 多设备,跨平台)+css3(新增css属性))
    // css3兼容

    // box-shadow
    // transition

    // css3 兼容写法(各大浏览器支持css3的时间是不一样的, 有些浏览器在原本css3的基础上拓展了效果 => 加兼容 => 不用担心,有插件 autoprefix)
    // -ms-box-shadow:1px 1px 1px  1px rgba(0,0,0,0.5);
    // -moz-box-shadow:1px 1px 1px  1px rgba(0,0,0,0.5);
    // -o-box-shadow:1px 1px 1px  1px rgba(0,0,0,0.5);
    // -webkit-box-shadow:1px 1px 1px  1px rgba(0,0,0,0.5);
    // box-shadow:1px 1px 1px  1px rgba(0,0,0,0.5);


    



</script>
</html>